<template>
  <div>
    <div style="display: flex;margin-bottom: 10px">
      <el-input
        placeholder="请输入社团名称"
        v-model="clubName"
        style="width: 200px;margin-left: 10px"
        clearable>
      </el-input>
      <el-button @click="getMyClubList" type="primary" style="margin-left: 10px" size="medium">查询</el-button>
    </div>

    <el-table
      :data="page.records"
      border
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="社团描述：">
              <span>{{ props.row.clubDescribe }}</span>
            </el-form-item>
<!--            <el-form-item label="社团通知：">-->
<!--              <span>{{ props.row.clubNotice }}</span>-->
<!--            </el-form-item>-->
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        fixed
        prop="id"
        label="ID"
        width="60">
      </el-table-column>
      <el-table-column
        prop="name"
        label="社团名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="clubIntroduce"
        label="社团介绍"
        width="300">
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="clubDescribe"-->
<!--        label="社团描述"-->
<!--        width="250">-->
<!--      </el-table-column>-->
      <el-table-column
        prop="clubNotice"
        label="社团通知"
        width="250">
      </el-table-column>
      <el-table-column
        prop="createUserId"
        label="社团身份"
        width="100"
      >
        <template slot-scope="scope">
          <p v-if="scope.row.createUserId==id">社长</p>
          <p v-else>成员</p>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{getDateTime(scope.row.createTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="250">
        <template slot-scope="scope">
          <el-button v-if="scope.row.createUserId==id" @click="getClubMember(scope.row.id)" type="text" size="small">指定下任社长</el-button>
          <el-button v-else @click="quitClub(scope.row.id)" type="danger" size="small">退出社团</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="changeClubList"
      :page-count="page.pages"
    >
    </el-pagination>
    <el-dialog
      title="社团成员"
      :visible.sync="dialogVisible"
      class="dialog1"
      width="40%"
      center>
      <el-table :data="member">
        <el-table-column property="name" label="姓名" width="100"></el-table-column>
        <el-table-column property="sex" label="性别" width="100"></el-table-column>
        <el-table-column property="grade" label="年级" width="100"></el-table-column>
        <el-table-column property="phone" label="电话" width="100"></el-table-column>
        <el-table-column

          label="操作"
          width="250">
          <template slot-scope="scope">
            <el-button v-show="scope.row.id!=id" @click="setPreManager(scope.row.id)" type="danger" size="small">指定并退团</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getClubMember, getClubPageList, getMyClubListPageList, quitClub, setPreManager} from "../../../api/club";
  import {getDateTime1} from "../../../utils/dateTimeUtil";

  export default {
    name: "MyClub",
    data() {
      return {
        dialogVisible: false,
        clubId:null,
        member: [],
        page: {
          total: 2,
          current: 1,
          records: [],
          pages: 2,
        },
        clubName: null,
        id: sessionStorage.getItem('id'),
      }
    },
    created() {
      this.getMyClubList();
    },
    methods: {
      getMyClubList() {
        getMyClubListPageList({
          currentPage: this.page.current,
          clubName: this.clubName,
        }).then(res => {
          this.page = res.data;
          console.log(this.page.pages)
        })
      },
      // getClubList(){
      //   getClubPageList({
      //     status: this.selectClubStatusValue,
      //     currentPage: this.page.current,
      //     clubName: this.clubName,
      //   }).then(res=>{
      //     this.page = res.data;
      //     console.log(this.page.pages)
      //   })
      // },
      changeClubList(val) {
        console.log(val)
        this.page.current = val;
        this.getMyClubList();
      },
      getDateTime(val) {
        return getDateTime1(val);
      },
      quitClub(clubId){
        quitClub({
          clubId: clubId,
        }).then(res=>{
          console.log(res)
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: res.message
            });
            this.getMyClubList();
          }
        })
      },
      setPreManager(studentId){
        setPreManager({
          clubId: this.clubId,
          id:studentId
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: res.message
            });
            this.dialogVisible = false
            this.getMyClubList();
          }
        })

      },
      getClubMember(clubId) {
        this.clubId=clubId;
        getClubMember({
          clubId: clubId,
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: res.message
            });
            this.dialogVisible = true
            this.member = res.data
          }
        })
      }
    }

  }
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
  text-decoration: none;
  margin: 20px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
